<template>
<div class="index-pay">
    <div class="bgc-white plr pt15 pb15 text-left">

        <ul class="msg fz-12 van-hairline--bottom pb10">
            <!-- <li>
                <span class="grey">订单编号：</span>
                <span>DH-202212211714-838</span>
            </li> -->
            <li>
                <span class="grey">订单编号：</span>
                <span>{{ detail.no || '' }}</span>
            </li>
            <li>
                <span class="grey">收货人：</span>
                <span>{{ detail.user_addr && detail.user_addr.name }}</span>
            </li>
            <!-- <li v-for="item in detail.goods_list" :key="item.id">
                <span class="grey">商品名称：</span>
                <span>{{ item.name }}</span>
            </li> -->
            <li>
                <span class="grey">收货地址：</span>
                <span>{{ detail.user_addr && detail.user_addr.addr }} {{ detail.user_addr && detail.user_addr.addr_extra }} </span>
            </li>
            <li>
                <span class="grey">支付金额：</span>
                <span class="price blod fz-16">{{ detail.pay_money  || '' }} </span>
            </li>
        </ul>

        <van-radio-group v-model="radio" checked-color="#ee0a24" class="mt10">
            <van-cell-group :border="false">
                <van-cell title="单选框 1" clickable @click="radio = 'alipay_wap'" :border="false">
                    <template #title>
                        <div class="flex">
                            <div class="fz-40" style="color: #3988ff"><svg-icon iconClass="alipay"></svg-icon></div>
                            <div class="pl6 pay-span">
                                <span>支付宝支付</span> <br/>
                                <span class="fz-12 grey">ALIPAY</span>
                            </div>
                        </div>
                    </template>
                    <template #right-icon>
                        <van-radio name="alipay_wap" />
                    </template>
                </van-cell>
                <van-cell title="单选框 2" clickable @click="radio = 'wechat_h5'" :border="false">
                    <template #title>
                        <div class="flex">
                            <div class="fz-40" style="color: #05ba00"> <svg-icon iconClass="wechat"></svg-icon> </div>
                            <div class="pl6 pay-span">
                                <span>微信支付</span> <br/>
                                <span class="fz-12 grey">ALIPAY</span>
                            </div>
                        </div>
                    </template>
                    <template #right-icon>
                        <van-radio name="wechat_h5" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>

    </div>
    <div class="fixed-end height-58 width100 bgc-white flex-center">
        <van-button type="danger" round size="small" style="width: 4rem" @click="pay">立即支付</van-button>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            radio: 'wechat_h5', // alipay_wap  wechat_h5
            detail: {}
        }
    },
    methods: {
        // 支付
        async pay () {
            try {
                const res = await this.$goods.paymentOrder({ pay_way: this.radio, order_no: this.detail.no })
                // console.log(res)
                if (this.radio === 'wechat_h5') { // 微信支付
                    window.open(res.data.info.url)
                } else if (this.radio === 'alipay_wap') {
                    const div = document.createElement('divform')
                    div.innerHTML = res.data.info.orderInfo
                    document.body.appendChild(div)
                    document.forms[0].acceptCharset = 'utf-8'
                    document.forms[0].submit()
                }
            } catch (err) {
                console.log(err)
            }
        }
    },
    created () {
        this.$route.query.id && this.$goods.orderDetail(this.$route.query.id).then(res => {
            // console.log(res)
            this.detail = res.data.detail
            if(res.data.detail.is_pay === 1) {
                this.$router.push(`/logistic?id=${res.data.detail.id}`)
            }
        })
    }
}
</script>

<style lang="less" scoped>
.msg {
    li {
        margin-bottom: 10px;
        .grey {
            display: inline-block;
            width: 66px;
        }
    }
}
.van-cell {
    padding-left: 0;
    padding-right: 10px;
}
.pay-span {
    line-height: 16px;
    padding-top: 2px;
}
</style>
